<template>
  <div class="container">
    <scroll-view class="scroll_x" :scroll-x="true" scroll-with-animation>
      <view
        v-bind:class="[currentTab == 0 ? 'active' : '','tab_item' ]"
        data-current="0"
        @tap="switchNav"
      >
        <text>所属客户</text>
      </view>
      <view
        v-bind:class="[currentTab == 1 ? 'active' : '','tab_item' ]"
        data-current="1"
        @tap="switchNav"
      >
        <text>服务客户</text>
      </view>
    </scroll-view>
    <swiper
      class="swiper w100"
      :current="currentTab"
      @change="switchTab"
      duration="500"
      v-bind:style="{ height: winHeight + 'rpx' }"
    >
      <swiper-item>
        <div class="search_box">
          <input type="text" class="search_input" placeholder="选择搜索条件" disabled @tap="showsearch">
        </div>
        <scroll-view
          scroll-y="true"
          @scrolltolower="pullLoad"
          v-bind:style="{ height: winHeight-96 + 'rpx' }"
          lower-threshold="60"
        >
          <ul class="orderlist" v-if="customerlists.length != 0">
            <li
              v-for="(item, index) in customerlists"
              :key="index"
              @tap="goto_customerinfo(item.id)"
            >
              <div class="header flex">
                <span class="user_pic">
                  <img v-if="item.headurl == 0 || !item.headurl" src="/static/imgs/system_user.png">
                  <img v-if="item.headurl == 0">
                  <img v-else :src="item.headurl">
                </span>
                <span class="user_name flex-item">{{ item.name }}</span>
                <span class="status">{{ item.phone }}</span>
              </div>
              <div class="order_time listwords">最近到店时间：{{ item.arrivetime }}</div>
              <div class="shop listwords flex">
                <span class="flex-item">门店名称：{{ item.shopname }}</span>
                <span v-show="item.lv != ''">{{ item.lv }}类客户</span>
              </div>
            </li>
            <div v-if="isbottom" class="flex bottom">
              <span>已经到底啦</span>
            </div>
          </ul>
          <ul v-else>
            <Empty message="没有所属客户"></Empty>
          </ul>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view :scroll-y="true">
          <ul class="orderlist" v-if="guestmyfulists.length != 0">
            <li v-for="(item, index) in guestmyfulists" :key="index">
              <div class="header flex">
                <span class="user_name flex-item">{{ item.name }}</span>
                <span class="status">{{ item.phone }}</span>
              </div>
              <div class="order_time listwords">最近到店时间：{{ item.arrivetime }}</div>
              <div class="shop listwords flex">
                <span class="flex-item">门店名称：{{ item.shopname }}</span>
                <span v-show="item.lv != ''">{{ item.lv }}类客户</span>
              </div>
            </li>
          </ul>
          <ul v-else>
            <Empty message="没有服务客户"></Empty>
          </ul>
        </scroll-view>
      </swiper-item>
    </swiper>
    <div class="mask flex" v-if="isSearch" @tap="hidesearch">
      <div class="search" @tap.stop="prevent">
        <div class="title flex">
          <span>选择订单条件</span>
        </div>
        <form @submit="formSubmit">
          <div class="section flex">
            <span class="section_title">姓名:</span>
            <input
              class="flex-item section_body"
              name="name"
              type="text"
              :value="search.name"
              @blur="recordname"
              placeholder="请输入客户姓名"
              placeholder-style="color:rgba(153, 153, 153, 0.5);font-size: 32rpx;"
            >
          </div>
          <div class="section flex">
            <span class="section_title">手机:</span>
            <input
              class="flex-item section_body"
              name="phone"
              type="text"
              :value="search.phone"
              @blur="recordphone"
              placeholder="请输入客户手机号"
              placeholder-style="color:rgba(153, 153, 153, 0.5);font-size: 32rpx;"
            >
          </div>
          <div class="section flex">
            <span class="section_title">会员卡号:</span>
            <input
              class="flex-item section_body"
              name="card"
              type="text"
              :value="search.card"
              @blur="recordcard"
              placeholder="请输入会员卡号"
              placeholder-style="color:rgba(153, 153, 153, 0.5);font-size: 32rpx;"
            >
          </div>
          <div class="section flex">
            <span class="section_title">门店:</span>
            <picker
              class="flex-item section_body"
              name="store"
              @change="storeChange"
              :value="store.index"
              :range="store.range"
              :range-key="'name'"
            >
              <view class="picker">{{store.range[store.index]['name']}}</view>
            </picker>
          </div>
          <div class="section flex">
            <span class="section_title">性别:</span>
            <radio-group class="flex-item section_body" name="sex" @change="recordsex">
              <label>
                <radio :checked="search.sex === ''"/>全部
              </label>
              <label>
                <radio value="0" :checked="search.sex === '0'"/>女
              </label>
              <label>
                <radio value="1" :checked="search.sex === '1'"/>男
              </label>
            </radio-group>
          </div>
          <div class="section flex">
            <span class="section_title">类别:</span>
            <picker
              class="flex-item section_body"
              name="category"
              @change="categoryChange"
              :value="category.index"
              :range="category.range"
              :range-key="'label'"
            >
              <view class="picker">{{category.range[category.index]['label']}}</view>
            </picker>
          </div>
          <button class="search_btn" form-type="submit">搜索</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import util from '@/utils/util'
import Empty from '@/components/empty'
import wx from 'wx'
export default {
  data () {
    return {
      customerlists: [],
      guestmyfulists: [],
      userInfo: {},
      select_info: '',
      page: 0,
      size: 10,
      currentTab: 0,
      winHeight: '',
      isbottom: false,
      isSearch: false,
      store: {
        range: [
          {
            id: '',
            name: '请选择所属门店'
          }
        ],
        index: '0'
      },
      category: {
        range: [
          {
            value: '',
            label: '请选择客户类别'
          },
          {
            value: 'A',
            label: 'A类客户'
          },
          {
            value: 'B',
            label: 'B类客户'
          },
          {
            value: 'C',
            label: 'C类客户'
          },
          {
            value: 'D',
            label: 'D类客户'
          },
          {
            value: 'E',
            label: 'E类客户'
          }
        ],
        index: '0'
      },
      search: {
        name: '',
        phone: '',
        card: '',
        sex: ''
      }
    }
  },
  components: {
    Empty
  },
  async onLoad () {
    let that = this
    // 重置参数
    that.userInfo = wx.getStorageSync('userInfo')
    that.customerlists = []
    that.select_info = ''
    that.page = 0
    that.isbottom = false
    // 请求数据
    await Promise.all([
      that.getswiperheight(),
      that.getcustomerlists(),
      that.getguestmyfuwu(),
      that.getmyjsonshoplist()
    ])
  },
  methods: {
    async getcustomerlists () {
      let that = this
      let userInfo = that.userInfo
      let paramObj = {
        floor: userInfo.floor,
        ismanage: userInfo.ismanage,
        user_id: userInfo.user_id,
        jsonshop: userInfo.jsonshop,
        select_info: that.select_info,
        page: that.page,
        size: that.size
      }
      const res = await api.getguestlists(paramObj);
      if (res.code === '100') {
        const data = res.data
        data.forEach((e, i) => {
          data[i]['arrivetime'] = util.formatTime(e.arrivetime)
        });
        that.customerlists.push.apply(that.customerlists, data)
        if (data.length < 10 && that.customerlists.length >= 3) {
          that.isbottom = true
        }
      }
    },
    async getguestmyfuwu () {
      let that = this
      const res = await api.getguestmyfuwu({ user_id: that.userInfo.user_id });
      if (res.code === '100') {
        that.guestmyfulists = res.data
      }
    },
    async getmyjsonshoplist () {
      let that = this
      const res = await api.getmyjsonshoplist({ jsonshop: that.userInfo.jsonshop })
      if (res.code === '100') {
        const data = res.data
        data.forEach((e, i) => {
          that.store.range.push(e)
        })
      }
    },
    async getswiperheight () {
      const that = this
      try {
        const res = wx.getSystemInfoSync()
        const clientHeight = res.windowHeight
        const clientWidth = res.windowWidth
        const rpxR = 750 / clientWidth
        const calc = clientHeight * rpxR - 64
        that.winHeight = calc
      } catch (e) {
        console.log(e)
      }
    },
    switchNav (e) {
      let that = this
      let cur = e.currentTarget.dataset.current
      if (that.currentTab !== cur) {
        that.currentTab = cur
      }
    },
    switchTab (e) {
      this.currentTab = e.target.current
    },
    pullLoad () {
      let that = this
      if (!that.isbottom) {
        that.page += 1
        that.getcustomerlists()
      }
    },
    // dropRefresh () {
    //   let that = this
    //   that.jsonshop = that.globalData.userInfo.jsonshop
    //   that.page = 0
    //   that.select_info = ''
    //   that.isbottom = false
    //   that.customerlists = []
    //   that.getcustomerlists()
    // },
    showsearch () {
      this.isSearch = true
    },
    hidesearch () {
      this.isSearch = false
    },
    storeChange (e) {
      this.store.index = e.mp.detail.value
    },
    categoryChange (e) {
      this.category.index = e.mp.detail.value
    },
    formSubmit (e) {
      const that = this
      const data = e.mp.detail.value
      console.log(data)
      let selectInfo = ''
      if (data.name !== '') {
        selectInfo += 'AND og.name LIKE "%' + data.name + '%" '
      }
      if (data.phone !== '') {
        selectInfo += 'AND og.phone LIKE "%' + data.phone + '%" '
      }
      if (data.card !== '') {
        selectInfo += 'AND og.vipcard LIKE "%' + data.card + '%" '
      }
      if (data.sex !== '') {
        selectInfo += 'AND og.sex = ' + data.sex + ' '
      }
      if (data.category !== '0') {
        selectInfo += 'AND og.lv = "' + that.category.range[data.category]['value'] + '" '
      }
      if (data.store !== '0') {
        that.jsonshop = that.store.range[data.store]['id']
      } else {
        that.jsonshop = that.globalData.userInfo.jsonshop
      }
      that.select_info = selectInfo
      that.customerlists = []
      that.isSearch = false
      that.isbottom = false
      that.page = 0
      that.getcustomerlists()
    },
    goto_customerinfo (id) {
      this.$router.push({ path: '/pages/guest/customerlistdetails/customerlistdetails', query: { id: id } })
    },
    recordname (e) {
      this.search.name = e.mp.detail.value
    },
    recordphone (e) {
      this.search.phone = e.mp.detail.value
    },
    recordcard (e) {
      this.search.card = e.mp.detail.value
    },
    recordsex (e) {
      this.search.sex = e.mp.detail.value
    },
    prevent () { }
  }
}
</script>
<style scoped>
.w100 {
  width: 100%;
}
.search_box {
  padding: 16rpx 0;
}
.search_input {
  display: block;
  width: 100%;
  height: 64rpx;
  box-sizing: border-box;
  padding: 14rpx 33rpx;
  background: #fff;
  border-radius: 32rpx;
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
  position: relative;
  z-index: 1;
}
.search_input::after {
  content: "";
  position: absolute;
  right: 30rpx;
  top: 20rpx;
  width: 23rpx;
  height: 29rpx;
  background: url(http://mytimg.178mr.com/search_btn.png) no-repeat;
  background-size: 100%;
  z-index: 2;
}
.orderlist {
  width: 100%;
}
.orderlist li {
  width: 100%;
  background: #fff;
  padding: 33rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.orderlist li .header {
  margin-bottom: 16rpx;
}
.orderlist li .user_pic {
  margin-right: 28rpx;
}
.orderlist li .user_pic,
.orderlist li .user_pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.orderlist li .user_name {
  font-size: 32rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: rgba(51, 51, 51, 1);
}
.orderlist li .status {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32px;
  color: rgba(102, 102, 102, 1);
}
.orderlist li .listwords {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 32rpx;
  color: rgba(153, 153, 153, 1);
  margin-bottom: 18rpx;
}
.orderlist li .details {
  margin-top: 26rpx;
}
.orderlist li .details .money {
  font-size: 28rpx;
  font-weight: 400;
  line-height: 38rpx;
  color: rgba(102, 102, 102, 1);
}
.orderlist li .details .details_btn {
  width: 112rpx;
  height: 46rpx;
  border: 2rpx solid #ff4444;
  border-radius: 24rpx;
  text-align: center;
  line-height: 42rpx;
  color: rgba(255, 68, 68, 1);
  font-size: 24rpx;
  margin-right: 32rpx;
}
.orderlist li .details .details_btn:last-child {
  margin-right: 0;
}
.scroll_x {
  height: 64rpx;
  background-color: #ffffff;
}
.tab_item {
  display: inline-block;
  width: 50%;
  height: 100%;
  line-height: 64rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333333;
}
.tab_item.active text {
  border-bottom: 4rpx solid #ff4444;
  color: #ff4444;
}
.tab_item text {
  display: inline-block;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
}
.swiper {
  padding: 0 20rpx;
  box-sizing: border-box;
}
.search {
  width: 624rpx;
  height: 860rpx;
  border-radius: 24rpx;
  background-color: #fff;
}
.title {
  height: 70rpx;
  color: #ff4444;
  font-size: 32rpx;
}
.section {
  height: 78rpx;
  padding-left: 48rpx;
}
.section_title {
  margin-right: 20rpx;
  color: #999999;
  font-size: 32rpx;
}
.section_body {
  color: rgba(153, 153, 153, 0.5);
  font-size: 32rpx;
}
.search_btn {
  width: 272rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #f44444;
  color: #fff;
  font-size: 36rpx;
  border-radius: 52rpx;
  margin-top: 90rpx;
}
</style>

